<dom-module id="som-input-styles">
  <template>
    <style>
      button {
        -webkit-transition: background, border .3s ease;
        transition: background, border .3s ease;
        background: #f8f8f8;
        border: 1px solid #ccc;
        margin: 0.25em 4px;
        padding: 0.5em 16px;
        cursor: pointer;
        border-radius: 3px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      button:hover {
        background-color: #eee;
        border-color: #777;
      }
      button.emphasized {
        background: #3f51b5;
        border-color: #7986cb;
        color: #fff;
      }
      button.emphasized:hover {
        background: #3949ab;
        border-color: #1a237e;
      }
      button:disabled,
      button[disabled],
      button[disabled]:hover {
        background: #ddd;
        border-color: #ccc;
        color: #999;
        cursor: default;
      }
      button[hidden] {
        display: none;
      }
      /* Styling checkboxes in CSS is a bit of a mess and required creating an
        element to replace the checkbox. */
      label.checkbox {
        cursor: pointer;
        display: flex;
        align-items: center;
      }
      input[type="checkbox"] {
        cursor: pointer;
        visibility: hidden;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        flex-grow: 0;
        flex-shrink: 0;
      }
      input[type="checkbox"]::before {
        box-sizing: border-box;
        visibility: visible;
        position: relative;
        content: "";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: 2px solid #222;
        border-radius: 2px;
        background: #fff;
        font-size: 20px;
        color: #fff;
      }
      input[type="checkbox"]:checked::before {
        background: #3f51b5;
        border-color: #3f51b5;
        content: "\2714";
      }
    </style>
  </template>
</dom-module>
